<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>获取本地音视频</title>
  <style>
    span {
      display: inline-block;
      margin: 20px;
      word-break: break-word;
    }
    .id,
    .name {
      width: 400px;
    }
    .type {
      width: 200px;
    }
    li {
      border-bottom: 1px solid #ccc;
    }
    .header {
      font-weight: bold;
    }
  </style>
</head>
<body>
<ul id="media"></ul>
<script>
  const $media = document.querySelector('#media');

  $media.innerHTML = [
    `<li class="header">`,
      `<span class="type">设备类型</span>`,
      `<span class="name">设备名称</span>`,
      `<span class="id">设备ID</span>`,
    `</li>`,
  ].join('');

  navigator.mediaDevices.enumerateDevices().then(res => {
    function appendMediaList (media) {
      const $li = document.createElement('li');
      const { deviceId, kind, label } = media;

      $li.innerHTML = [
        `<span class="type">${kind}</span>`,
        `<span class="name">${label}</span>`,
        `<span class="id">${deviceId}</span>`,
      ].join('');
      $media.appendChild($li);
    }
    res && res.map(appendMediaList);
    console.log(res)
  });
</script>
</body>
</html>
